<script setup>
import SvgIcon from "../../../Svglcon.vue";
import ToolButtonList2 from "../tools/toolButtonList2.vue";
import {ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import RangeSelector from "../tools/RangeSelector.vue";
import RangeSelectorNoFill from "../tools/RangeSelectorNoFill.vue";


const cameraViewPicture = ref('https://dummyimage.com/400/000000/ffffff')
const enable = ref(true)
const enableInput = ref('')
const contrastSliderValue = ref(0)
const strengthSliderValue = ref(0)
const saturationSliderValue = ref(0)
const hueSliderValue = ref(0)

const whiteBalanceSliderValue = ref(10)
const exposureSliderValue = ref(0)
const autoExposure = ref(true)
const angleSelectList = ref([
  {
    value: 'Option1',
    label: '漫反射',
  },
  {
    value: 'Option2',
    label: '漫反射',
  },
  {
    value: 'Option3',
    label: '漫反射',
  }
])
const angle = ref('')
const effectPresetsList = ref([
  {
    value: 'Option1',
    label: '漫反射',
  },
  {
    value: 'Option2',
    label: '漫反射',
  },
  {
    value: 'Option3',
    label: '漫反射',
  }
])
const effectPresets = ref()


</script>

<template>

  <div class="endWeekWarp">
    <div class="endWeek">
      <div class="iconBars">
        <div class="iconItem">
          <svg-icon name="close" style="zoom:0.9"></svg-icon>
        </div>
        <div class="iconItem">
          <svg-icon name="close" style="zoom:0.9"></svg-icon>
        </div>
        <div style="flex: 1">

        </div>
        <div class="iconItem">
          <svg-icon name="close" style="zoom:0.9"></svg-icon>
        </div>
      </div>
      <div class="cameraView"
           :style="{ backgroundImage: 'url(' + cameraViewPicture + ')'}"
      >


      </div>
      <div class="colorSelectLine">
        <div class="title">
          角度
        </div>
        <el-select v-model="angle" placeholder="" style="width: 203px">
          <el-option
              v-for="item in angleSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>


      </div>
      <div class="colorSelectLine">
        <div class="title">
          效果预设
        </div>
        <div style="display: flex">
          <el-select v-model="effectPresets" placeholder="" style="width: 173px">
            <el-option
                v-for="item in effectPresetsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <div>
            <svg-icon name="close"></svg-icon>
          </div>
        </div>



      </div>
      <div class="LUTBars">
        <div class="materialMangeTitleBar">
          <div>
            <svg-icon name="close"/>
          </div>

          <div class="title">LUT</div>
        </div>
        <div class="inputSelectContain" style="height: 135px">
          <div class="enableField">
            <div class="enableTitle">
              <div>
                启用
              </div>
              <el-switch v-model="enable"></el-switch>
            </div>
            <div class="enableSelectBar">
              <div>
                <el-input
                    v-model="enableInput"
                    style="width: 211px"
                    placeholder="Please Input"
                    :suffix-icon="Search"
                />
              </div>

              <div>
                <svg-icon name="close"></svg-icon>
              </div>

            </div>
          </div>
          <div class="strengthField">
            <div class="strengthTitle">
              <div>
                强度
              </div>
              <div></div>

            </div>
            <div class="valueSlider">
              <RangeSelector
                  :min="0"
                  :max="100"
                  :height="30"
                  v-model="strengthSliderValue"
              />
            </div>

          </div>

        </div>
      </div>
      <div class="endWorkBars">
        <div class="materialMangeTitleBar">
          <div>
            <svg-icon name="close"/>
          </div>

          <div class="title">后处理</div>
        </div>
        <div class="inputSelectContain" style="height: 322px">


          <div class="strengthField">
            <div class="strengthTitle">
              <div>
                对比度
              </div>
              <div></div>

            </div>
            <div class="valueSlider">
              <RangeSelector
                  :min="0"
                  :max="100"
                  :height="30"
                  v-model="contrastSliderValue"
              />


            </div>

          </div>
          <div class="strengthField">
            <div class="strengthTitle">
              <div>
                饱和度
              </div>
              <div></div>

            </div>
            <div class="valueSlider">
              <RangeSelector
                  :min="0"
                  :max="100"
                  :height="30"
                  v-model="saturationSliderValue"
              />


            </div>

          </div>
          <div class="strengthField">
            <div class="strengthTitle">
              <div>
                色调
              </div>
              <div></div>

            </div>
            <div class="valueSlider">
              <RangeSelector
                  :min="0"
                  :max="100"
                  :height="30"
                  v-model="hueSliderValue"
              />


            </div>

          </div>

          <div class="strengthField">
            <div class="strengthTitle">
              <div>
                白平衡
              </div>
              <div>

              </div>

            </div>
            <div class="valueSlider">
              <RangeSelectorNoFill
                  :min="0"
                  :max="100"
                  :height="30"
                  v-model="whiteBalanceSliderValue"
              />
              <div style="width: 60px;display: flex;align-items: center;justify-content: center;">
                {{ whiteBalanceSliderValue }}
              </div>
            </div>

          </div>
          <div class="strengthField">
            <div class="strengthTitle">
              <div>
                曝光
              </div>
              <div>
                <el-switch v-model="autoExposure"></el-switch>
              </div>

            </div>
            <div class="valueSlider">
              <RangeSelector
                  :min="0"
                  :max="100"
                  :height="30"
                  v-model="exposureSliderValue"
              />


            </div>

          </div>


        </div>
      </div>

    </div>
    <tool-button-list2></tool-button-list2>


  </div>

</template>

<style scoped lang="scss">

.endWeekWarp {
  width: 100%;
}

.endWeek {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;

  .colorSelectLine {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 5px;
    .title{
      width: 56px;
    }


  }

  .iconBars {
    display: flex;
    height: 50px;
    width: 100%;

    .iconItem {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

    }

  }

  .cameraView {
    width: 100%;
    height: 180px;
    margin-bottom: 5px;

  }

  .materialMangeTitleBar {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #EEEEEE;
    border: #CCCCCC 1px solid;

    .title {
      width: 100%;
      font-size: 14px;
      text-align: left;
      color: #999999;
    }
  }

  .inputSelectContain {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-top: 0;
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .LUTBars {

    .enableField {
      height: 65px;
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-around;

      .enableTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .enableSelectBar {
        display: flex;
        justify-content: space-around;
      }


    }

    .strengthField {
      height: 65px;
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-around;

      .strengthTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .valueSlider {
        width: 100%;
        height: 30px;

      }
    }

  }

  .endWorkBars {
    .strengthField {
      height: 65px;
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-around;

      .strengthTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .valueSlider {
        width: 100%;
        height: 30px;
        display: flex;

      }
    }

  }


}

</style>